$(function(){
    // 参数设置为全局对象，因为将来筛选和分页都要用
    let q = {
        pagenum  :1,	      //是	int	页码值
        pagesize :30,	      //是	int	每页显示多少条数据
        cate_id  :"",         //否	string	文章分类的 Id
        state    :"",	      //否	string	文章的状态，可选值有：已发布、草稿
    }
    // 需求1：初始化文章列表 - 封装成函数，将来复用
    let layer = layui.layer
    initArticleList() //调用初始化文章列表
    function initArticleList(){
        axios({
            url:'/my/article/list',
            method:'get',
            params: q
        }).then(res=>{
            //成功回调
            if(res.data.status !==0){
                return layer.msg(res.data.message)
            }
            // 渲染
            let arr = []
            res.data.data.forEach(ele =>{
                arr.push(
                   `<tr>
                         <td>${ele.title}</td>
                         <td>${ele.cate_name}</td>
                         <td>${dateFormat(ele.pub_date)}</td>
                         <td>${ele.state}</td>
                         <td>
                             <button class="layui-btn layui-btn-xs" >编辑</button>
                             <button data-id="${ ele.Id}"  class="del-btn layui-btn layui-btn-xs  layui-btn-danger ">删除</button>
                         </td>
                    </tr>`     
                )
            })
            // 循环结束后，赋值
            $('tbody').empty().html(arr.join(''))
            // 分页
            renderPage(res.data.total)
        });
    }

    let form = layui.form
    initArtCateList() //函数不调用不执行
    function initArtCateList() {
        axios({
            url: '/my/article/cates',
        }).then(res => {
            //成功回调
            //  console.log(res)
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            // 成功，渲染
            let arr = ['<option value="">请选择文章所属分类</option>']
            res.data.data.forEach(ele => {
                arr.push(
                    `<option value="${ele.Id}">${ele.name}</option>`
                )
            })
            // 循环结束赋值
            let str = arr.join('')
            $("[name=cate_id]").empty().html(str)
            // form.render();可以渲染layui中的select/checkbox/cadio
            form.render()
        });
    }

    // 需求3：筛选
    $('#searchForm').on('submit',function(e){
        e.preventDefault()
        // cate_id和state的值修改，根据form表单里面的值修改
        q.cate_id = $('[name=cate_id]'),val()
        q.state = $('[name=state]'),val()
        // 重新渲染  文章列表
        initArticleList
    })

    // 需求4：分页
    function renderPage(total) {
        let laypage = layui.laypage;
        // 执行一个laypage实例
        laypage.render({
            elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号
            count: total, //数据总数，从服务端得到
            limit: q.pagesize, //每页显示多少条
            curr: q.pagenum , //第几页
            // 显示区域
            layout:['count','limit','prev','page','next','refresh','skip'],
            limits:[2,3,5,10],
            // 页面加载的时候，页码切换的时候会触发，每页显示条数改变的时候会触发
            jump: function(obj,first) {
                if(!first){
                    // 把当前页面改变，把条数改变，重新渲染文章列表
                    q.pagenum = obj.curr
                    q.pagesize = obj.limit
                    initArticleList()
                }
            }
          });
    }
    // 需求5：删除 - 事件委托/类名/id
    $('tbody').on('click','.del-btn',function(){
    let id = $(this).attr('data-id')
     layer.confirm('s是否确定删除?',{icon:3,title:'提示'},function(index) {
         //删除的ajax
         axios({
             url:'/my/article/delete/' + id,
             method:'get',
         }).then(res=>{
             //成功回调
            //  console.log(res)
            if(res.data.status !==0){
                return layer.msg(res.data.message)
            }
            // 成功，提示，刷新页面
            layer.msg('恭喜您，删除文章成功!')
            $('.del-btn').length ==1 && q.pagenum >= 2 && q.pagenum--
            initArticleList()
         });
         layer.close(index)
     })
    })
   
})